import classes from './GoodsCounter.module.css'
import { useContext } from 'react';
import React from 'react'
import { GoodsContext } from '../../../store/GoodsContext';

export const GoodsCounter = (props) => {
    const context = useContext(GoodsContext);
    const reduceCount = () => {
        context.reduceCounter(props.goodsData)
    }
    const addCount = () => {
        context.addCounter(props.goodsData)
    }

  return (
    <div className={classes.container}>
        {
            props.goodsData.count ? 
            <>
                <p className={classes.reduce} onClick={reduceCount}> - </p>
                <p className={classes.count}> {props.goodsData.count ? props.goodsData.count : 0} </p>
            </>
            : ''
        }
        <p className={classes.plus} onClick={addCount}> + </p>
    </div>
  )
}
